{% extends 'encyclopedia/base.html' %}

{% block title %}{{ camera.title }} - 相机百科{% endblock %}

{% block content %}
    <!-- 返回按钮 -->
    <div class="mb-4">
        <a href="{% url 'encyclopedia:camera_list' %}" class="btn btn-outline-secondary rounded-lg shadow-sm flex items-center">
            <i class="fa fa-arrow-left mr-2"></i> 返回相机列表
        </a>
    </div>

    <!-- 相机头部信息 -->
    <div class="bg-gradient-to-r from-primary to-primary/80 rounded-xl shadow-lg text-white p-6 mb-6">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
                <div class="flex items-center gap-3 mb-2">
                    <i class="fa fa-camera text-3xl"></i>
                    <h1 class="text-2xl md:text-3xl font-bold">{{ camera.title }}</h1>
                </div>
                <div class="flex flex-wrap items-center gap-4">
                    <span class="inline-flex items-center bg-white/20 rounded-full px-3 py-1 text-sm backdrop-blur-sm">
                        <i class="fa fa-building-o mr-2"></i>{{ camera.brand }}
                    </span>
                    <span class="inline-flex items-center bg-white/20 rounded-full px-3 py-1 text-sm backdrop-blur-sm">
                        <i class="fa fa-th-large mr-2"></i>
                        <a href="{% url 'encyclopedia:category_detail' camera.category.id %}" class="text-white hover:text-secondary transition-colors">
                            {{ camera.category.name }}
                        </a>
                    </span>
                    {% if camera.release_date %}
                    <span class="inline-flex items-center bg-white/20 rounded-full px-3 py-1 text-sm backdrop-blur-sm">
                        <i class="fa fa-calendar mr-2"></i>{{ camera.release_date|date:"Y年m月d日" }}
                    </span>
                    {% endif %}
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="flex gap-3">
                <a href="{% url 'encyclopedia:camera_edit' camera.id %}" class="btn btn-white text-primary hover:bg-gray-100 rounded-lg shadow-sm">
                    <i class="fa fa-pencil mr-2"></i> 编辑
                </a>
                <button type="button" class="btn btn-outline-white hover:bg-white/10 rounded-lg shadow-sm" data-bs-toggle="modal" data-bs-target="#deleteModal">
                    <i class="fa fa-trash mr-2"></i> 删除
                </button>
            </div>
        </div>
    </div>

    <div class="row gap-6">
        <!-- 左侧：相机规格信息 -->
        <div class="col-lg-4">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="bg-gray-50 p-4 border-b">
                    <h3 class="text-lg font-semibold text-gray-800">基本参数</h3>
                </div>
                <div class="p-5">
                    <dl class="space-y-4">
                        <div class="flex items-start">
                            <dt class="w-1/3 text-sm font-medium text-gray-500">品牌</dt>
                            <dd class="w-2/3 text-sm text-gray-900">{{ camera.brand }}</dd>
                        </div>
                        <div class="flex items-start">
                            <dt class="w-1/3 text-sm font-medium text-gray-500">分类</dt>
                            <dd class="w-2/3 text-sm">
                                <a href="{% url 'encyclopedia:category_detail' camera.category.id %}" class="text-primary hover:underline">
                                    {{ camera.category.name }}
                                </a>
                            </dd>
                        </div>
                        {% if camera.release_date %}
                        <div class="flex items-start">
                            <dt class="w-1/3 text-sm font-medium text-gray-500">发布日期</dt>
                            <dd class="w-2/3 text-sm text-gray-900">{{ camera.release_date|date:"Y年m月d日" }}</dd>
                        </div>
                        {% endif %}
                        {% if camera.sensor_type %}
                        <div class="flex items-start">
                            <dt class="w-1/3 text-sm font-medium text-gray-500">传感器类型</dt>
                            <dd class="w-2/3 text-sm text-gray-900">{{ camera.sensor_type }}</dd>
                        </div>
                        {% endif %}
                        {% if camera.image_resolution %}
                        <div class="flex items-start">
                            <dt class="w-1/3 text-sm font-medium text-gray-500">图像分辨率</dt>
                            <dd class="w-2/3 text-sm text-gray-900">{{ camera.image_resolution }}</dd>
                        </div>
                        {% endif %}
                        {% if camera.lens_mount %}
                        <div class="flex items-start">
                            <dt class="w-1/3 text-sm font-medium text-gray-500">镜头卡口</dt>
                            <dd class="w-2/3 text-sm text-gray-900">{{ camera.lens_mount }}</dd>
                        </div>
                        {% endif %}
                        {% if camera.video_resolution %}
                        <div class="flex items-start">
                            <dt class="w-1/3 text-sm font-medium text-gray-500">视频分辨率</dt>
                            <dd class="w-2/3 text-sm text-gray-900">{{ camera.video_resolution }}</dd>
                        </div>
                        {% endif %}
                    </dl>
                </div>
                
                <!-- 时间信息 -->
                <div class="bg-gray-50 p-4 border-t">
                    <div class="text-xs text-gray-500 space-y-1">
                        <p>创建时间: {{ camera.created_at|date:"Y年m月d日 H:i:s" }}</p>
                        <p>更新时间: {{ camera.updated_at|date:"Y年m月d日 H:i:s" }}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧：相机详细介绍 -->
        <div class="col-lg-8">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="bg-gray-50 p-4 border-b">
                    <h3 class="text-lg font-semibold text-gray-800">产品介绍</h3>
                </div>
                <div class="p-6">
                    <!-- 内容段落样式优化 -->
                    <div class="prose max-w-none">
                        {{ camera.content|linebreaks }}
                    </div>
                </div>
            </div>
            
            <!-- 相关配件推荐 -->
            {% if related_accessories %}
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mt-6">
                <div class="bg-gray-50 p-4 border-b">
                    <h3 class="text-lg font-semibold text-gray-800">相关配件</h3>
                </div>
                <div class="p-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {% for accessory in related_accessories %}
                        <div class="border border-gray-100 rounded-lg p-3 hover:shadow-md transition-shadow">
                            <a href="{% url 'encyclopedia:accessory_detail' accessory.id %}" class="text-gray-800 hover:text-primary">
                                <h4 class="font-medium flex items-center">
                                    <i class="fa fa-puzzle-piece mr-2 text-primary"></i>
                                    {{ accessory.name }}
                                </h4>
                                <p class="text-sm text-gray-500 mt-1">{{ accessory.description|truncatechars:50 }}</p>
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-xl shadow-lg">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-gray-700">您确定要删除相机 "{{ camera.title }}" 吗？此操作不可撤销。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <form method="post" action="{% url 'encyclopedia:camera_delete' camera.id %}">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-danger">确认删除</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* 自定义样式 */
        .prose p {
            margin-bottom: 1rem;
            line-height: 1.7;
        }
        
        .prose strong {
            font-weight: 600;
            color: #262626;
        }
        
        /* 添加渐入动画 */
        .bg-white {
            animation: fadeInUp 0.5s ease-out;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
{% endblock %}